<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>维修工单详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <style>
        #layer-images img {
            width: 160px;
            height: 160px;
            margin: 5px;
        }

        a:hover {
            cursor: pointer;
            text-decoration: none;
        }
    </style>
</head>
<body>

<div class="layui-fluid" id="container">
    <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="repair-form">
                <input type="hidden" name="id">
                <div class="layui-row">
                    <div v-if="form.state>0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">维修单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="no" class="layui-input" v-model="form.no" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">维修内容</label>
                            <div class="layui-input-block">
                                <input type="text" name="content" class="layui-input" v-model="form.content" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">维修设备</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceName" class="layui-input" v-model="form.deviceName"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设备位置</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceLocation" class="layui-input"
                                       v-model="form.deviceLocation" readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建人</label>
                            <div class="layui-input-block">
                                <input type="text" name="createByName" class="layui-input" v-model="form.createByName"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="createTime" class="layui-input" v-model="form.createTime"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">负责人</label>
                            <div class="layui-input-block">
                                <input type="text" name="directorName" class="layui-input" v-model="form.directorName"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state==0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <input type="hidden" v-model="form.directorName"/>
                            <label class="layui-form-label">负责人</label>
                            <div class="layui-input-block">
                                <select id="directors" lay-filter="director">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">完成时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="completeTime" class="layui-input" v-model="form.completeTime"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>0" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">完成情况</label>
                            <div class="layui-input-block">
                                <textarea class="layui-textarea" name="completion"
                                          v-model="form.completion"></textarea>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="text" name="stateText" class="layui-input" v-model="form.stateText"
                                       readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div v-if="form.state==1" class="layui-card">
        <div class="layui-card-header">维修子项
            <button type="button" class="layui-btn layui-btn-xs" @click="addItem">添加</button>
        </div>
        <div class="layui-card-body">
            <div id="layer-items"></div>
        </div>
    </div>
    <div v-if="form.state>0" class="layui-card">
        <div class="layui-card-header">流程信息</div>
        <div class="layui-card-body">
            <div id="layer-activities"></div>
        </div>
    </div>
    <div style="text-align: center">
        <button class="layui-btn" v-if="form.state==0" @click="create">创建维修单</button>
        <button class="layui-btn" v-if="form.state==1&&task.state==1" @click="complete">完成工单</button>
        <button class="layui-btn layui-btn-primary" v-if="form.state<2&&form.state>0" @click="terminate">撤销</button>
    </div>

</div>
<script type="text/html" id="item-form">
    <div class="layui-card">
        <div class="layui-card-header">维修子项</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="item-form">
                <input type="hidden" name="repairId">
                <input type="hidden" name="deviceId">
                <div class="layui-form-item">
                    <label class="layui-form-label">设施设备</label>
                    <div class="layui-input-block">
                        <input type="text" name="deviceName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">位置信息</label>
                    <div class="layui-input-block">
                        <input type="text" name="deviceLocation" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">维修内容</label>
                    <div class="layui-input-block">
                        <textarea name="name" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="note" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">执行人</label>
                    <div class="layui-input-block">
                        <select id="execute-by" lay-search>
                            <option value="">选择执行人</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">通知人</label>
                    <div class="layui-input-block">
                        <select id="notify-names" lay-search>
                            <option value="">选择通知人</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">确定</button>
                </div>
                <div style="height:200px;"></div>
            </form>
        </div>
    </div>
</script>
<script id="items-tpl" type="text/html">
    <ul class="layui-timeline">
        {{# layui.each(d, function (index, item) { }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <a class="repair-items" data-id="{{item.id}}">{{item.executeByName}}【{{item.stateText}}】</a>
                <p>{{item.name}}</p>
            </div>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无维修项
        {{# } }}
    </ul>
</script>
<script id="activities-tpl" type="text/html">
    <ul class="layui-timeline">
        {{# layui.each(d, function (index, item) { }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h4 style="font-weight: bold;">{{item.name}}【{{item.ownerName}}】</h4>
                <p>{{item.completeTime || '待完成'}}</p>
            </div>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无流程数据
        {{# } }}
    </ul>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/vue.min.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laytpl', 'util'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var admin = layui.admin;
        var id = getParam('id');
        var taskId = getParam('taskId');
        var faultId = getParam('faultId');
        layui.util.fixbar();

        function loadUsers(callback) {
            $.get('users', function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        function showItem(id, title) {
            var p = layer.open({
                title: title,
                type: 2,
                content: 'repair-item.html?id=' + id,
                area: ['840px', '630px'],
                maxmin: true
            });
        }

        function setRepairItemBehavior() {
            $('.repair-items').each(function (index, item) {
                $(item).on('click', function () {
                    var id = item.dataset['id'];
                    showItem(id, '维修项目');
                })
            });
        }

        function createItem(data) {
            if (!data.name) {
                layer.msg('请填写维修内容');
                return;
            }
            if (!data.executeByName) {
                layer.msg('请选择执行人');
                return;
            }
            $.post('/repair-items/create', {
                repairId: data.repairId,
                deviceId: data.deviceId,
                deviceName: data.deviceName,
                deviceLocation: data.deviceLocation,
                name: data.name,
                note: data.note,
                executeByName: data.executeByName,
                notifyNames: data.notifyNames || ''
            }, function () {
                //维修项目
                $.get('/repair-items', {repairId: data.repairId}, function (res) {
                    var tpl = $('#items-tpl').html();
                    laytpl(tpl).render(res.data, function (html) {
                        $('#layer-items').html(html);
                    });
                    setRepairItemBehavior();
                });
            });
        }

        form.on('submit(form-submit)', function (data) {
            data.field.executeByName = $('#execute-by option:selected').text();
            data.field.notifyNames = $('#notify-names option:selected').text();
            createItem(data.field);
            if (popupIndex) {
                layer.close(popupIndex);
            }
            return false;
        });

        new Vue({
            el: "#container",
            data() {
                return {
                    form: {
                        faultId: null,
                        content: '',
                        deviceId: null,
                        deviceName: '',
                        deviceLocation: '',
                        directorName: '',
                        state: 0
                    },
                    task: {}
                }
            },
            mounted() {
                if (taskId) {
                    this.loadTask(taskId);
                } else if (id) {
                    this.loadForm(id);
                } else if (faultId) {
                    this.loadByFaultId(faultId);
                }
            },
            updated() {
                form.render();
            },
            methods: {
                loadForm(id) {
                    let that = this;
                    $.get('/repairs/' + id, function (result) {
                        //点检信息
                        var data = result.data;
                        that.form = data;
                        form.val('repair-form', data);
                        //维修项目
                        $.get('/repair-items', {repairId: data.id}, function (res) {
                            var tpl = $('#items-tpl').html();
                            laytpl(tpl).render(res.data, function (html) {
                                $('#layer-items').html(html);
                            });
                            setRepairItemBehavior();
                        });
                        //流程信息
                        $.get('/tasks/proc-inst-tasks', {procInstId: data.procInstId}, function (res) {
                            var tpl = $('#activities-tpl').html();
                            laytpl(tpl).render(res.data, function (html) {
                                $('#layer-activities').html(html);
                            });
                        });
                    });
                },
                loadTask(taskId) {
                    let that = this;
                    $.get('/tasks/' + taskId, function (res) {
                        that.task = res.data;
                        if (that.task) {
                            that.loadForm(that.task.formKey);
                        }
                        if (that.task.state == 2) {
                            layer.msg('该任务已处理');
                        }
                    });
                },
                loadByFaultId(faultId) {
                    let that = this;
                    $.get('/faults/' + faultId, function (res) {
                        var data = res.data;
                        that.form.faultId = data.id;
                        that.form.content = data.content;
                        that.form.deviceId = data.deviceId || '';
                        that.form.deviceName = data.deviceName;
                        that.form.deviceLocation = data.deviceLocation;
                    });
                    this.loadDirectors();
                },
                loadDirectors() {
                    $.get('/users/roleIds/3,4,5', function (res) {
                        var result = res.data;
                        for (var i in result) {
                            var item = result[i];
                            $('#directors').append('<option value="' + item.id + '">' + item.name + '</option>');
                        }
                        form.render();
                    });
                },
                create() {
                    var directorName = $('#directors option:selected').text();
                    if (!directorName) {
                        layer.msg('请选择负责人');
                        return;
                    }
                    let that = this;
                    $.post('/repairs/create', {
                        faultId: that.form.faultId,
                        content: that.form.content,
                        deviceId: that.form.deviceId || '',
                        deviceName: that.form.deviceName,
                        deviceLocation: that.form.deviceLocation,
                        directorName: directorName
                    }, function () {
                        window.location.reload();
                    });
                },
                addItem() {
                    let that = this;
                    popupIndex = admin.popupRight({
                        area: '360px',
                        success: function () {
                            var formHtml = $('#item-form').html();
                            $('#' + this.id).html(formHtml);
                            var data = {};
                            data.repairId = that.form.id;
                            data.deviceId = that.form.deviceId;
                            data.deviceName = that.form.deviceName;
                            data.deviceLocation = that.form.deviceLocation;
                            form.val('item-form', data);
                            form.render();

                            loadUsers(function (result) {
                                for (var i in result) {
                                    var item = result[i];
                                    $('#execute-by').append('<option value="' + item.id + '">' + item.name + '</option>');
                                    $('#notify-names').append('<option value="' + item.id + '">' + item.name + '</option>');
                                }
                                form.val('item-form', data);
                                form.render();
                            });
                        }
                    });
                    return popupIndex;
                },
                hasUnAuditedItems() {
                    var result;
                    var url = "/repair-items/" + this.form.id + "/has-unaudited-items";
                    $.ajax({
                        type: "get",
                        url: url,
                        cache: false,
                        async: false,
                        success: function (res) {
                            result = res.data;
                        }
                    })
                    return result;
                },
                complete() {
                    if (this.hasUnAuditedItems()) {
                        layer.msg('有未审核通过的维修子项');
                        return;
                    }
                    if (!this.form.completion) {
                        layer.msg('输入完成情况');
                        return;
                    }
                    let that = this;
                    $.post('/repairs/complete', {
                        taskId: that.task.id,
                        id: that.form.id,
                        completion: that.form.completion || ''
                    }, function () {
                        window.location.reload();
                    });
                },
                terminate() {
                    let that = this;
                    layer.confirm('确定撤销该工单吗？', function (index) {
                        $.post('/repairs/terminate', {
                            id: that.form.id
                        }, function () {
                            window.location.reload();
                        });
                    });
                }
            }
        })

    });
</script>
</body>
</html>